<template>
	<div class="building-detail">
		<component
			:is="baseInfo"
			:houseData="baseData"
      :showLocation="true"
      :locationInfo="locationInfo"
		/>
		<div class="list">
			<div
				class="item"
				v-for="(value, key, index) in dataEnum"
				:key="key"
				:class="{wrap: wrapKey.includes(key)}"
			>
				<p>{{ `${index + 1}.${value}` }}</p>
        <!-- 处理 sfmzstdPhoto -->
        <template v-if="key === 'sfmzstdPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
        <!-- 处理 sfczjxgbczzrPhoto -->
        <template v-else-if="key === 'sfczjxgbczzrPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
       <template v-else-if="key === 'sstdsyyrkrclzxPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
          <template v-else-if="key === 'gryssdcsszblyyqksddpPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
          <template v-else-if="key === 'fwyfwdddzxccdsssfayqjshsfPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
        <p v-else>{{ collectionData?.[key] ?? '-' }}</p>
      </div>
		</div>
	</div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue'
import baseInfo from './../../inspection/components/baseInfo'

const props = defineProps({
	baseData: {
		type: Object,
		default: () => {}
	},
  locationInfo: {
		type: Object,
		default: () => {}
	},
	collectionData: {
		type: Object,
		default: () => {}
	}
})

const dataEnum = ref({
	'jzrks': '总居住人数(人)',
	'zzrs': '租住人数(人)',
	'cs': '房屋层数(层)',
	'fjsl': '房间数量(个)',
	'jzfjs': '出租房间数量(个)',
	'jzscxyaqcksl': '房屋首层现有安全出口的数量(个)',
	'jzxyssltsl': '房屋现有疏散楼梯的数量(个)',
	'jzscmj': '房屋建筑面积(平方米)',
	'ckfhwggptzlsl': '窗口防护网、广告牌、铁栅栏数量(个)',
	'bdfwjzrydddzxcsl': '本房屋居住人员的电动自行车数量',
	'cdfs': '充电方式',
	'cdfsqtbz': '其他充电方式',
	'czryrs': '出租人员从事外卖、闪送、代驾等职业的人数',
	'mhqsl': '灭火器数量(个)',
	'fytsmz': '防烟逃生面罩数量(套)',
	'xggdjsbp': '悬挂固定警示标牌数量(张)',
	'jzsyjyplmhxts': '房屋简易消防喷头数量(个)',
	'jzszlwxdlgybjqs': '房屋烟感报警器数量(个)',
	'wdwhjgfjgqsyyrkrgbdj': '是否存在夹芯彩钢板出租住人',
  'sfczjxgbczzrPhoto': '夹芯彩钢板出租住人照片',
	'sstdsyyrkrclzx': '疏散通道使用易燃可燃材料装修',
  'sstdsyyrkrclzxPhoto':'使用易燃可燃材料装修照片',
	'gryssdcsszblyyqksddp': '供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等',
  'gryssdcsszblyyqksddpPhoto':'不利于烟气扩散的顶棚南棚照片',
	'cjzwqtjyyt': '除居住外是否存在其他经营业态',
	'cjzwqtjyytmsg': '除居住外其他经营业态',
	'jsrysstd': '是否按标准建设疏散通道',
  'sfmzstdPhoto': '通道照片',
  'fwyfwdddzxccdsssfayqjshsf': '服务于房屋的电动自行车充电设施是否按要求建设和收费',
  'fwyfwdddzxccdsssfayqjshsfPhoto':'服务于房屋的电动自行车充电设施是否按要求建设和收费照片',
	'sfszsszsbzhaqckbz': '是否设置疏散指示标志和安全出口标志',
	'sfazfztsss': '是否安装软梯逃生绳等辅助逃生设施',
	'ywgdlttxwd': '楼内有无固定楼梯通向屋顶或室外平台',
})
const wrapKey = [
	'cjzwqtjyytmsg',
	'sstdjsqk',
	'sfmzstdPhoto',
  'sfczjxgbczzrPhoto',
	'cdfsqtbz',
  'sstdsyyrkrclzxPhoto',
  'gryssdcsszblyyqksddpPhoto',
  'fwyfwdddzxccdsssfayqjshsfPhoto',
]
const onPreview = (images, index) => {
  ImagePreview({
    images,
    startPosition: index,
    closeable: true
  })
}
watch(() => props.collectionData, val => {
	if (!val?.id) return
	if (val.cjzwqtjyyt === '否') {
		delete dataEnum.value.cjzwqtjyytmsg
	} else {
		delete dataEnum.value.cjzwqtjyyt
	}
	if (val.cdfs?.indexOf('其他') === -1) {
		delete dataEnum.value.cdfsqtbz
	}
	if (val.cs < 2) {
		delete dataEnum.value.sfazfztsss
		delete dataEnum.value.ywgdlttxwd
	}
}, {deep: true, immediate: true})
</script>

<style scoped lang="less">
.building-detail {
	padding: 24px 0;

	.base-info {
		margin-bottom: 24px;
	}

	.list {
		background: #fff;
		padding: 0 24px;
	}

	.item {
		display: flex;
		padding: 14px 0;
		border-bottom: 2px solid var(--border-color);

		&:nth-last-of-type(1) {
			border: 0;
		}

		p {
			min-height: 44px;
			line-height: 44px;

			&:nth-of-type(1) {
				color: var(--content-color);
				width: 500px;
			}

			&:nth-of-type(2) {
				width: 0;
				flex: 1;
			}
		}
	}

	.wrap {
		flex-direction: column;
		flex-wrap: wrap;

		p {
			&:nth-of-type(2) {
				width: 100%;
			}
		}
    .image-list {
      width: 100%;
      display: flex;
      gap: 24px;
      .van-image {
        border-radius: 8px;
        overflow: hidden;
        width: calc(calc(100% - 120px) / 5);
        height: 120px;
      }
    }
	}
}
</style>
